<template>
	<view>
		<view class="cu-bar bg-white search fixed" >
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="输入搜索的关键词" confirm-type="search" v-model="tel"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-green shadow-blur round" @click="telFriends">搜索</button>
			</view>
		</view>
		<view>
			<!-- 添加好友 -->
			<view class="action">
				<button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal" style="float: left;">添加好友</button>
			</view>
			<button class="cu-btn bg-green shadow" type="warn"  style="float: right;"  @tap="auditFriends" data-target="Modal">审核好友</button>
		</view>
		<view style="clear: both;"></view>
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true">
			<block v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item.name" :id="'indexes-' + item.name" :data-index="item.name">
					<view class="padding">{{item.name}}</view>
					<view class="cu-list menu-avatar no-padding">
						<view class="cu-item" v-for="(items,sub) in 2" :key="sub">
							<view class="cu-avatar round lg">{{item.name}}</view>
							<view class="content">
								<view class="text-grey">{{item.name}}<text class="text-abc">{{list[sub].name}}</text>君</view>
								<view class="text-gray text-sm">
									有{{sub+2}}个主子需要伺候
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.name}}</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
		<!-- 添加好友弹框 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">添加新朋友</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class="padding-xl">
					<input type="text" placeholder="请输入member_id或talk_id" v-model="friendId" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="isok">确定</button>
					</view>
				</view>
			</view>
		</view>
		<newMessage ref='newMessage'></newMessage>
	</view>
</template>

<script>
  import newMessage from '../../asstess/newMessage/newMessage'
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				list: [],
				listCur: '',
				// 弹框
				modalName: null,
                friendId:'',
                userData:'',
                applyList:[],
                examineList:[],
                tel:'13419586637'
			};
		},
		onLoad() {
           this.$Socket.action('fetchFriendApplyList',null,(res)=>{
               console.log(res)
               if(res && res.code == 200){
                   this.examineList = res.data
               }
           },()=>{})
           console.log(this.examineList)
            // 获取本地存储内数据
            let data  = sessionStorage.getItem('userData')
            this.userData = JSON.parse(data)
            // 新消息弹框
            let list = [{}];
            for (let i = 0; i < 26; i++) {
                list[i] = {};
                list[i].name = String.fromCharCode(65 + i);
            }
            this.list = list;
            this.listCur = list[0];
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		methods: {
            isok(){
                if(this.friendId != '' ){
                    // if(this.friendId == this.userData.member_id){
                    //     uni.showToast({
                    //         icon: 'none',
                    //         title: '不能添加自己',
                    //         duration: 2000
                    //     });
                    //     this.hideModal()
                    // }else{
                        switch(this.friendId.length){
                            case 4:
                                this.$Socket.action(
                                    "addFriendUseMemberId",
                                    { member_id: this.friendId },
                                    (data) => {
                                    console.log(data,'data');
                                    this.$Socket.action("fetchFriendApplyList",null,(res)=>{
                                        if( res.code == 200){
                                        uni.showToast({
                                            title: '添加成功',
                                            duration: 2000
                                        });
                                        console.log(res,'审核')
                                        }
                                    },()=>{});
                                    },
                                    ()=>{}
                                );
                                this.hideModal()
                            break;
                            case 9:
                                const res3 =  this.$Socket.action("addFriendUseTalkId",
                                 { talk_id: this.friendId },(res1)=>{
                                     console.log(res1,'res1')
                                        let res11 = this.$Socket.action('getTalkList',null,()=>{},()=>{})
                                        if(res11.code==200){
                                            console.log('会话列表',res11)
                                        }
                                    
                                 },()=>{}
                                
                                );
                                
                                this.hideModal()
                            break;
                        }
                    // }
                }
            },
            friendApply(){
                this.$Socket.action("fetchFriendApplyList",null,(res)=>{
                    if(res.code == 200){
                        this.applyList = res.data;
                        // console.log(this.applyList,'审核')
                    }
                },()=>{});
            },
			// 弹框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			// 关闭弹框
			hideModal(e) {
                this.modalName = null
                this.friendId = ''
			},
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].name;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].name
				};
			},
            telFriends(){
                this.$Socket.action(
                    'findFriendFromTel',
                    {tel:this.tel},
                    (data)=>{
                        if(data.body.code == 200){
                            console.log('data',data)
                        }
                    },
                    ()=>{}
                )
            },
			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

    //触发结束选择
    tEnd() {
      this.hidden = true;
      this.listCurID = this.listCur;
    },
    indexSelect(e) {
      let that = this;
      let barHeight = this.barHeight;
      let list = this.list;
      let scrollY = Math.ceil((list.length * e.detail.y) / barHeight);
      for (let i = 0; i < list.length; i++) {
        if (scrollY < i + 1) {
          that.listCur = list[i].name;
          that.movableY = i * 20;
          return false;
        }
      }
    },
    // 审核好友
    auditFriends() {
      // 跳转到审核页
      uni.navigateTo({
        url: "../friend/review",
      });
    },
  },
  components: {
    newMessage,
  },
};
</script>

<style lang='less' scoped>
page {
  padding-top: 100upx;
}

.indexes {
  position: relative;
}

.indexBar {
  position: fixed;
  right: 0px;
  bottom: 0px;
  padding: 20upx 20upx 20upx 60upx;
  display: flex;
  align-items: center;
}

.indexBar .indexBar-box {
  width: 40upx;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
  border-radius: 10upx;
}

.indexBar-item {
  flex: 1;
  width: 40upx;
  height: 40upx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24upx;
  color: #888;
}

movable-view.indexBar-item {
  width: 40upx;
  height: 40upx;
  z-index: 9;
  position: relative;
}

movable-view.indexBar-item::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 10upx;
  height: 20upx;
  width: 4upx;
  background-color: #f37b1d;
}

.indexToast {
  position: fixed;
  top: 0;
  right: 80upx;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100upx;
  height: 100upx;
  border-radius: 10upx;
  margin: auto;
  color: #fff;
  line-height: 100upx;
  text-align: center;
  font-size: 48upx;
}
.cu-dialog {
  margin-top: -800rpx;
}
</style>
